import React from 'react'
import {Form, Modal, Button, Input, Radio,InputNumber} from 'antd';
const FormItem = Form.Item;
const { TextArea } = Input;
import reqwest from 'reqwest';

class ModalForm extends React.Component {
  state = {
    ModalText: 'Content of the modal',
    visible: false,
    confirmLoading: false,
    data:this.props.rowData
  }
  showModal = () => {
    this.setState({
      visible: true,
      data:'',
      confirmLoading: false,
      modalType:'create'
    });
  }
  
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.setState({
          confirmLoading: true,
        })
        const that =this
        if(this.state.modalType==='update'){
          const params ={
            ...values,
            id:this.state.data.id
          }
          this.props.save(params,'update')
        }else{
          this.props.save(values)
        }
        
      }
    });
  }
  handleOk = () => {
    this.setState({
      ModalText: 'The modal will be closed after two seconds',
      confirmLoading: true,
    });
    this.handleSubmit()
  }
  handleCancel = () => {
    this.props.handleModelCancel();
    this.props.form.resetFields();
    this.setState({
      visible: false,
    });
  }
  componentWillReceiveProps(nextProps){
    
      if(this.props != nextProps){
        this.setState({
          data:nextProps.rowData,
          modalType:nextProps.modalType,
          confirmLoading:nextProps.modalLoading
        })
      }
  }
  render() {
    const { visible, confirmLoading, ModalText } = this.state;
    const { getFieldDecorator } = this.props.form;
    const rowData = this.state.data;

    const formItemLayout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
    }
   
    return (
      <div>
        <Modal title={this.state.modalType=='update'?`修改${this.props.title}`:`新增${this.props.title}`}
          visible={this.props.visible}
          onOk={this.handleSubmit}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.handleCancel}
          maskClosable={false}
        >
        <Form >
            {this.props.formArr.map((item) => {
                if(!item.edit) return;
                return (
                    <FormItem key={item.dataIndex} label={`${item.title}:`} {...formItemLayout}>
                    {getFieldDecorator(item.dataIndex, {
                        initialValue: rowData[item.dataIndex],
                        rules: [
                            {
                            required: true,
                            },
                        ],
                    })(<Input disabled={item.disable} />)}
                </FormItem>
                )
            })}
        </Form>
        </Modal>
      </div>
    );
  }
}


export default Form.create()(ModalForm)